<template>
  <div>
    <div style="display: flex; justify-content: flex-start;margin: 10px">
      <a-button type="primary" @click="addClassify(null)">新增分类</a-button>
      <a-button
        type="primary"
        icon="search"
        @click="search()"
        style="margin:0 10px"
        >筛选</a-button
      >
      <!-- <span style="padding-top:6px">选择语言：</span>
      <a-select
        placeholder="请筛选语言"
        v-model="lang"
        style="width:300px"
        @change="languageChanges"
      >
        <a-select-option :value="1">简体中文</a-select-option>
        <a-select-option :value="2">繁体</a-select-option>
        <a-select-option :value="3">英语</a-select-option>
        <a-select-option value="">全部</a-select-option>
      </a-select> -->
    </div>

    <a-table
      bordered
      style="padding-top: 10px"
      :rowSelection="rowSelection"
      :columns="columns"
      :dataSource="dataTable"
      :rowKey="(record, index) => record.categoryId"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="operation" slot-scope="text, row">
        <a-button
          v-if="row.type == 5 || row.type == 6"
          size="small"
          type="primary"
          @click="sonClassify(row)"
          >子分类</a-button
        >
        <a-button size="small" type="primary" @click="editClass(row)"
          >编辑</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- 弹框 导出 /筛选   -->
    <a-modal
      title="筛选数据"
      :visible="visibleSearch"
      cancelText="关闭"
      okText="筛选"
      @ok="handleSearch"
      @cancel="visibleSearch = false"
    >
      <div>
        <a-form>
          <a-form-item
            label="语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="语言"
              v-model="filterOutObj.language"
            >
              <a-select-option
                :key="i.language"
                v-for="i in languageList"
                :value="i.language"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
        <a-form>
          <a-form-item
            label="内容分类模块"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="内容分类模块"
              v-model="filterOutObj.type"
            >
              <a-select-option
                :key="i.type"
                v-for="i in categoryTypeList"
                :value="i.type"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 弹框 -->
    <a-modal
      title="新增/编辑分类"
      :visible="visibleDetails"
      @cancel="offModal"
      cancelText="关闭"
      okText="确定"
      @ok="handleSubmit"
    >
      <a-form :form="formData">
        <a-form-item
          label="分类名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            v-decorator="['categoryName', { initialValue: categoryName }]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="模块分类"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            placeholder="请选择模块分类"
            v-decorator="['categoryType', { initialValue: categoryType }]"
            @change="typeChange"
          >
            <a-select-option value="1">大湾区概览</a-select-option>
            <a-select-option value="2">政策</a-select-option>
            <a-select-option value="3">资助及优惠</a-select-option>
            <a-select-option value="4">对接及联络</a-select-option>
            <a-select-option value="5">商务支援</a-select-option>
            <a-select-option value="6">活动及培训</a-select-option>
            <a-select-option value="7">香港贸发局</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="文章语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            placeholder="请选择文章语言"
            v-decorator="['language', { initialValue: language }]"
            @change="languageChange"
          >
            <a-select-option value="1">简体中文</a-select-option>
            <a-select-option value="2">繁体</a-select-option>
            <a-select-option value="3">英语</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
var rowKeys = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    rowKeys = selectedRows;
  }
};
export default {
  inject: ["reload"],
  components: {
    UploadImg
  },
  data() {
    return {
      visibleDetails: false,
      dataTable: [],
      detail: {},
      columns: [
        {
          title: "所属内容分类",
          dataIndex: "categoryName",
          align: "center"
        },
        {
          title: "模块分类",
          dataIndex: "categoryTypeName",
          align: "center"
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体";
            } else if (text == "3") {
              return "英语";
            }
          }
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      rowSelection: {
        hideDefaultSelections: true
      },
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
        language: "",
        type: ""
      },
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1
      },
      typeNumber: 0,
      totalPage: 0,
      showHOST: api.showHOST,
      radioType: 2,
      formData: this.$form.createForm(this),
      categoryIds: [],
      HOST: api.HOST,
      ategoryList: {
        language: "",
        type: ""
      },
      categoryParentId: "",
      categoryType: "",
      language: undefined,
      languageName: "",
      childList: [],
      categoryName: "",
      categoryId: "",
      lang: undefined,
      visibleSearch: false,

      filterOutObj: {
        language: "",
        type: ""
      },

      languageList: [
        { language: 1, name: "简体中文" },
        { language: 2, name: "繁体中文" },
        { language: 3, name: "英文" },
        { language: "", name: "全部" }
      ],

      categoryTypeList: [
        { type: 1, name: "大湾区概览" },
        { type: 2, name: "政策" },
        { type: 3, name: "资助及优惠" },
        { type: 4, name: "对接及网络" },
        { type: 5, name: "商务支援" },
        { type: 6, name: "活动及培训" },
        { type: 7, name: "香港贸发局服务" },
        { type: "", name: "全部" }
      ]
    };
  },
  methods: {
    search() {
      this.visibleSearch = true;
    },
    handleSearch() {
      this.visibleSearch = false;
      this.pagination.current = 1;
      this.form.language = this.filterOutObj.language;
      this.form.type = this.filterOutObj.type;
      this.getPlan();
    },
    offModal() {
      this.categoryName = undefined;
      this.language = "";
      this.categoryType = "";
      this.categoryId = "";
      this.visibleDetails = false;
    },
    sonClassify(val) {
      //   console.info(val);
      this.$router.push({
        path: "contentChildClassify",
        query: { params: val.categoryId, type: val.type }
      });
      // let temp={categoryId:val.categoryId}
      // api.getChildList(temp).then(res=>{
      //     if(res.code==200){

      //         this.childList=res.result;
      //     }
      // });
    },

    languageChange(values) {
      this.ategoryList.language = values;
    },
    languageChanges(values) {
      this.form.language = values;
      this.getPlan();
    },
    addClassify() {
      this.visibleDetails = true;
      this.formData = this.$form.createForm(this);
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    getPlan() {
      this.form.page = this.pagination.current;
      api.getCategoryPage(this.form).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.pagination.total = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.getPlan();
    },
    editClass(row) {
      this.formData = this.$form.createForm(this, {
        name: "dynamic_rule"
      });
      this.visibleAdd = true;
      this.clearData();
      console.info(row);
      this.categoryName = row.categoryName;
      this.language = row.language + "";
      this.categoryType = row.type + "";
      this.categoryId = row.categoryId;
      this.visibleDetails = true;
      // this.visibleDetails = true;
    },
    clearData() {
      this.categoryName = "";
      this.language = "";
      this.categoryType = "";
      this.categoryId = "";
    },
    delPlan(row) {
      api
        .delCategory({
          ids: row.categoryId
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getPlan();
          }
        });
    },
    handleSubmit() {
      this.formData.validateFields((err, values) => {
        let temp = {};
        temp.categoryName = values.categoryName;
        temp.language = values.language;
        temp.parentId = values.categoryIds;
        temp.type = values.categoryType;
        temp.categoryId = this.categoryId;
        // if(this.typeNumber == 5 || this.typeNumber == 6){
        //   values.categoryIds = values.categoryChildName
        // }
        //   values.industryIds = values.industryChildName
        //   this.$delete(values,'categoryChildName');
        //   this.$delete(values,'industryChildName');
        //   if(this.modelTitle == "编辑文章"){
        //       values.articleId = this.rowData.articleId;
        //   }
        api.saveCategory(temp).then(res => {
          if (res.code == 200) {
            // this.getPlan();
            this.formData.resetFields();
            this.$message.success("保存成功");

            this.clearData();
            // this.reload();
            this.getPlan();
            this.visibleDetails = false;
          }
        });
      });
    },

    previewImage(file) {
      // console.log(file);
      window.open(file.url);
    },
    typeChange(values, row) {
      this.ategoryList.type = values;
      this.typeNumber = values;
      this.categoryIds = [];
      api.getCategoryList(this.ategoryList).then(res => {
        if (res.code == 200) {
          res.result.forEach(r => {
            this.categoryIds.push({
              value: r.categoryId,
              text: r.categoryName
            });
          });
          if (row.category) {
            this.categoryParentId = row.category[0].parentId;
            this.categoryChange(this.categoryParentId, row);
          }
        }
      });
    },
    categoryChange(val, row) {
      this.formData.setFieldsValue({
        categoryChildName: []
      });
      this.categoryChildName = [];
      if (this.typeNumber == 5 || this.typeNumber == 6) {
        api.getChildList({ categoryId: val }).then(res => {
          if (res.code == 200) {
            res.result.forEach(r => {
              this.categoryChildName.push({
                value: r.categoryId,
                text: r.categoryName
              });
            });
          }
          if (row) {
            var arr = [];
            row.category.forEach(r => {
              arr.push(r.categoryId);
            });
            this.formData.setFieldsValue({
              categoryChildName: arr
            });
          }
        });
      }
    }
  },
  created() {
    this.getPlan();
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
